
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="" prop="newStatus">
        <el-radio-group
          v-model="queryParams.newStatus"
          size="small"
          @change="changeTheme"
          fill="#66b1ff"
        >
          <el-radio :label="0">未上新</el-radio>
          <el-radio :label="1">已上新</el-radio>
          <el-radio :label="2">部分上新</el-radio>
          <el-radio :label="3">不上新</el-radio>
          <el-radio :label="null">所有</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="productNo">
        <el-input
          v-model="queryParams.productNo"
          @keyup.enter.native="getList"
          placeholder="请输入货号"
          clearable
        />
      </el-form-item>

      <el-form-item label="" prop="colorProperty">
        <el-input
          v-model="queryParams.colorProperty"
          @keyup.enter.native="getList"
          placeholder="请输入颜色属性"
          clearable
        />
      </el-form-item>

      <el-form-item label="" prop="manufacturerCode">
        <!-- <el-input v-model="queryParams.manufacturerCode" placeholder="请输入生产厂家代码" clearable
          @keyup.enter.native="handleQuery" /> -->
        <el-select
          v-model="queryParams.manufacturerCode"
          placeholder="请选择厂家代码"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_coder"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <!--  -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['product:secondry:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['product:secondry:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['product:secondry:remove']"
          >删除</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['product:secondry:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" @click="handleNonew">批量不上新</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-upload" @click="chatNew"
          >批量上新</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-s-comment" @click="chat"
          >通知</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-plus" @click="chatAdd"
          >添加颜色</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <div ref="tableDom">
      <el-table
        :maxHeight="secondryList.length ? tableHeight : 'auto'"
        border
        id="bootstrap‐table"
        v-loading="loading"
        :data="secondryList"
        @selection-change="handleSelectionChange"
        @row-dblclick="t"
        :row-style="{ height: '100px' }"
        ref="BaseTable"
        :row-class-name="tableRowClassName"
        @cell-click="tableEdit"
      >
        <el-table-column type="selection" width="55" align="center" />
        <!-- <el-table-column label="产品颜色ID" align="center" prop="id" width="90px" /> -->
        <!-- <el-table-column label="产品模板ID" align="center" prop="templateId" /> -->
        <el-table-column label="货号" align="center" prop="productNo" />
        <!-- <el-table-column label="图片名称" align="center" prop="picName" /> -->
        <el-table-column label="图片" align="center" prop="picUrl">
          <template #default="scope">
            <image-preview :src="scope.row.picUrl" :width="80" :height="80" />
            <!-- <image-popover
              :thumbnail-url="pjtUrl + scope.row.picUrlYL"
              :original-url="pjtUrl + scope.row.picUrl"
            ></image-popover> -->
            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.picUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 800px; height: 600px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 100px; height: 100px; object-fit: contain"
                />
              </template>
            </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column label="颜色属性" align="center" prop="colorProperty">
          <template slot-scope="scope">
            <div>
              {{ scope.row.colorProperty }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上新状态" align="center" prop="newStatus">
          <template slot-scope="scope">
            <div>
              {{ scope.row.newStatus | state2 }}
            </div>
            <div
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              @click="statusList(scope.row)"
            >
              尺寸状态
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品编码" align="center" prop="productCode" />
        <!-- <el-table-column v-if="showColumn." label="logo名称" align="center" prop="logoName" /> -->
        <el-table-column label="logo图片" align="center" prop="logoUrl">
          <template #default="scope">
            <image-preview :src="scope.row.logoUrl" :width="80" :height="80" />
            <!-- <image-popover
              :thumbnail-url="pjtUrl + scope.row.logoUrlYL"
              :original-url="pjtUrl + scope.row.logoUrl"
              :width="100"
              :height="100"
            ></image-popover> -->
            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.logoUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.logoUrl"
                  style="width: 600px; height: 800px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.logoUrl"
                  style="width: 100px; height: 100px; object-fit: contain"
                />
              </template>
            </el-popover> -->
          </template>
          <!-- <template slot-scope="scope">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <el-image style="width: 100px; height: 100px" :src="scope.row.logoFullUrl"></el-image></template> -->
        </el-table-column>
        <el-table-column
          label="尺寸"
          align="center"
          prop="proTemplateSizeList"
          :formatter="formatData"
        >
        </el-table-column>
        <el-table-column
          label="生产厂家代码"
          align="center"
          prop="manufacturerCode"
          width="100"
        />
        <el-table-column
          label="成衣检测报告"
          align="center"
          prop="purchasingReportAttachments"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.customerProductTalking }}</span> -->
              <el-input
                v-model="scope.row.purchasingReportAttachments"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname"
                  >{{ scope.row.purchasingReportAttachments }}
                </span>
              </div>
            </el-popover>
          </template>
          <!-- <template slot-scope="scope">
            <el-button size="mini" @click="downLoadFile(scope.row.purchasingReportAttachments)"
              v-show="scope.row.purchasingReportAttachments">
              下载
            </el-button>

          </template> -->
        </el-table-column>

        <el-table-column
          width="100px"
          :label="'设计拍摄样板进度'"
          align="center"
          prop="designShootingSample"
        />
        <el-table-column
          width="100px"
          :label="'设计培训'"
          align="center"
          prop="designTraining"
        />
        <el-table-column
          width="100px"
          :label="'运营主色/辅色'"
          align="center"
          prop="operationMainColor"
        />

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <!-- <template slot="header">
            <i class="el-icon-setting" style="font-size: 22px; cursor: pointer" @click="showColumnOption"></i>
          </template> -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['product:secondry:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['product:secondry:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 配置列面板 -->
    <transition name="fade">
      <div class="columnOption" v-show="isShowColumn">
        <div class="content">
          <div class="head">选择显示字段</div>
          <div class="body">
            <el-checkbox v-model="checkList.productNo">货号</el-checkbox>
            <el-checkbox v-model="checkList.picUrl">图片</el-checkbox>
            <el-checkbox v-model="checkList.colorProperty"
              >颜色属性</el-checkbox
            >
            <el-checkbox v-model="checkList.logoUrl">logo图片</el-checkbox>
            <el-checkbox v-model="checkList.proTemplateSizeList"
              >尺寸</el-checkbox
            >
            <el-checkbox v-model="checkList.designShootingSample"
              >设计-拍摄样板进度</el-checkbox
            >
            <el-checkbox v-model="checkList.designTraining"
              >设计-培训</el-checkbox
            >
            <el-checkbox v-model="checkList.operationMainColor"
              >运营-主色/辅色</el-checkbox
            >
            <el-checkbox v-model="checkList.remark">备注</el-checkbox>

            <!-- <el-checkbox v-model="checkList.merchandise">商品部</el-checkbox>
                        <el-checkbox v-model="checkList.operation">运营部</el-checkbox>
                        <el-checkbox v-model="checkList.vision">视觉部</el-checkbox>
                        <el-checkbox v-model="checkList.design">设计部</el-checkbox>
                        <el-checkbox v-model="checkList.copywriting">新媒体部</el-checkbox>
                        <el-checkbox v-model="checkList.shot">摄影部</el-checkbox>
                        <el-checkbox v-model="checkList.customer">客服部</el-checkbox> -->

            <!-- <el-checkbox v-model="checkList.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="checkList.name">姓名</el-checkbox>
            <el-checkbox v-model="checkList.provinces">省份</el-checkbox>
            <el-checkbox v-model="checkList.city">市区</el-checkbox>
            <el-checkbox v-model="checkList.adreess">地址</el-checkbox>
            <el-checkbox v-model="checkList.zipCode">邮编</el-checkbox> :page-sizes="[10]"-->
          </div>
          <div class="footer">
            <el-button size="small" type="primary" plain @click="saveColumn"
              >保存列配置</el-button
            >
          </div>
        </div>
      </div>
    </transition>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改产品二级信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      v-if="open"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="颜色属性" prop="colorProperty">
          <!-- <el-input v-model="form.colorProperty" placeholder="请输入颜色属性" @blur="updateData"
                                                                                                                                                                                        @keyup.enter.native="enterBlur($event)" /> -->
          <el-select
            :disabled="isColor"
            v-model="form.colorProperty"
            clearable
            filterable
            remote
            :remote-method="getDatas"
            :loading="loading"
            placeholder="请选择颜色属性"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="产品模板ID" prop="templateId">
                                    <el-input v-model="form.templateId" placeholder="请输入产品模板ID" />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </el-form-item> -->
        <!-- <el-form-item label="图片名称" prop="picName">
          <el-input v-model="form.picName" placeholder="请输入图片名称" />
                                                                                                                                                                                                                                                                                                                                                                                                                                            </el-form-item> -->
        <!-- <el-form-item label="图片地址" prop="picUrl">
                                    <el-input v-model="form.picUrl" placeholder="请输入图片地址" />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </el-form-item> -->
        <!-- //-----------新增或修改方法里上传图片 -->
        <!-- <el-form-item label="图片" prop="picUrl" label-width="100px">
          <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
            :on-exceed="handleExceed" :on-success="handlePictureSuccessPic" :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview" :file-list="files" :on-change="changeFile1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" v-if="picUrl" :src="picUrl" alt="">
          </el-dialog>
                                            </el-form-item> -->
        <el-form-item label="产品图片" prop="picUrl">
          <!-- <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                                                                                        :on-exceed="handleExceed" :on-success="handlePictureSuccessPic" :before-upload="beforeAvatarUpload"
                                                                                                                                                                                        :on-preview="handlePictureCardPreview" :file-list="files" :on-change="changeFile1">
                                                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                                                    </el-upload>
                                                                                                                                                                                    <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                                                        <img width="100%" v-if="picUrl" :src="picUrl" alt="">
                                                                                                                                                                                                                        </el-dialog> :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-remove="handlePic"-->
          <el-upload
            ref="uploadPic"
            :action="imgUpload.url"
            :headers="imgUpload.headers"
            list-type="picture-card"
            :on-change="changePic"
            :file-list="filePic"
            multiple
            :on-success="uploadPic"
            :on-remove="RemovePic"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handlePic">
            <span
              ><i class="el-icon-s-opportunity" style="color: #fb894c"></i
              >点击此处 将图片按Ctrl+V 粘贴至此处</span
            >
          </div>
        </el-form-item>
        <el-form-item label="尺寸" prop="proTemplateSizeList">
          <!-- <el-checkbox-group v-model="checked" @change="test">
            <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{ item.label }}
            </el-checkbox>
                                                                                                                                                                                                                                                                                                </el-checkbox-group> -->
          <el-select
            v-model="checked"
            placeholder="请选择尺寸"
            clearable
            multiple
            @change="test"
          >
            <el-option
              v-for="dict in dict.type.sys_product_size"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <!-- //-----------新增或修改方法里上传图片 -->
        <!-- <el-form-item label="logo图片" prop="logoUrl" label-width="100px">
          <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
            :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview" :file-list="fileList" :on-change="changeFile2">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
          </el-dialog>
                                            </el-form-item> -->
        <!-- //-----------新增或修改方法里上传图片 -->
        <el-form-item label="logo图片" prop="logoUrl">
          <!-- <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                                    :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                                    :on-preview="handlePictureCardPreview" :file-list="fileList" :on-change="changeFile2">
                                                                                                                                    <i class="el-icon-plus"></i>
                                                                                                                                </el-upload>
                                                                                                                                <el-dialog :visible.sync="dialogVisible">
                                                                                                                                    <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                    </el-dialog> -->
          <el-upload
            ref="uploadlogourl"
            :action="imgUpload.url"
            :headers="imgUpload.headers"
            list-type="picture-card"
            :on-change="changelogourl"
            :file-list="filelogourl"
            multiple
            :on-success="uploadlogourl"
            :on-remove="Removelogourl"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div id="preview" @paste="handlelogourl">
            <span
              ><i class="el-icon-s-opportunity" style="color: #fb894c"></i
              >点击此处 将图片按Ctrl+V 粘贴至此处</span
            >
          </div>
        </el-form-item>
        <el-form-item label="生产厂家代码" prop="manufacturerCode">
          <!-- <el-input v-model="form.manufacturerCode" placeholder="请输入生产厂家代码" /> -->
          <el-select
            v-model="form.manufacturerCode"
            placeholder="请选择厂家代码"
            clearable
            filterable
          >
            <el-option
              v-for="dict in dict.type.sys_product_coder"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成衣检测报告" prop="purchasingReportAttachments">
          <el-input
            v-model="form.purchasingReportAttachments"
            placeholder="请输入成衣检测报告"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
        </el-form-item>

        <!-- <el-form-item label="拍摄样板进度" prop="designShootingSample" label-width="100px">
          <el-input v-model="form.designShootingSample" placeholder="请输入拍摄样板进度" />
        </el-form-item> -->
        <!-- <el-form-item label="培训" prop="designTraining" label-width="100px">
          <el-input v-model="form.designTraining" placeholder="请输入培训内容" />
                                                                                                                                                                                                              </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="Visible"
      width="500px"
      append-to-body
      title="批量上新"
      :before-close="dialogBeforeCloseNew"
      v-if="Visible"
    >
      <!-- <el-row> -->
      <!-- <el-col :span="8" class="left">
        <el-tree class="tree-border" show-checkbox :data="deptOptions" border size="medium"
            @node-click="handleNodeClick" @check="handleContentCheck" empty-text="加载中，请稍候"></el-tree>

                                                                                                                                                                                                                                                                                                                                                                                  </el-col> -->
      <!-- <el-col :span="14"> -->
      <el-form :rules="rules">
        <el-form-item label="上新方式" prop="returnAddress">
          <el-radio-group
            v-model="state"
            size="small"
            fill="#66b1ff"
            @change="changeState"
          >
            <el-radio :label="0">首次上新</el-radio>
            <el-radio :label="1">强制上新</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品上架时间" prop="newTime" label-width="100px">
          <el-date-picker
            clearable
            v-model="newTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择商品上架时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上架时间备注" prop="newTime" label-width="100px">
          <!-- <el-date-picker clearable v-model="newTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择商品上架时间">
                                                        </el-date-picker> -->
          <el-input
            v-model="newTimeMark"
            type="text"
            placeholder="请输入上架时间备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="上新渠道" prop="newChannel">
          <!-- <el-input v-model="form.newChannel" placeholder="请输入上新渠道" /> v-model="optionsAll"-->

          <el-select
            v-model="newChannel"
            placeholder="请选择上新渠道"
            clearable
            multiple
            @change="test1"
          >
            <el-option :value="'1'" label="全部" multiple> </el-option>
            <el-option
              v-for="dict in dict.type.sys_product_qudao"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- <ul>
              <li v-for="(item) of this.list" :key="item.proNewId">
                
                货号：<span>{{ item.productNo }}</span>，颜色：<span>{{
                  item.colorProperty }}</span>
                ，尺寸：<span>{{ item.proTemplateSizeStr }}</span>
              </li>
                                                                                                                                                                                                                                                                                                                                              </ul> -->
      </el-form>

      <!-- </el-col> -->
      <!-- </el-row> -->
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="submitNew" v-show="!noSelf"
          >确 定</el-button
        >
        <el-button type="primary" @click="submitSelf" v-show="noSelf"
          >确 定</el-button
        >
        <el-button @click="canNew">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="isVisible"
      width="800px"
      append-to-body
      title="发送通知"
      :before-close="dialogBeforeClose"
    >
      <el-row>
        <el-col :span="8" class="left">
          <el-tree
            class="tree-border"
            show-checkbox
            :data="deptOptions"
            border
            size="medium"
            @node-click="handleNodeClick"
            @check="handleContentCheck"
            empty-text="加载中，请稍候"
          ></el-tree>
        </el-col>
        <el-col :span="14">
          <el-form>
            <el-form-item
              label="通知主题"
              label-width="80px"
              style="width: 100%"
            >
              <el-input
                v-model="remindTitle"
                type="textarea"
                placeholder="请输入通知主题"
              ></el-input>
            </el-form-item>
            <ul>
              <li v-for="item of this.chatlist" :key="item.id">
                颜色ID：<span>{{ item.id }}</span
                >，货号：<span>{{ item.productNo }}</span
                >，颜色：<span>{{ item.colorProperty }}</span>
              </li>
              <li v-if="this.list.length > 5">......</li>
            </ul>
            <span>共计新增产品信息记录：{{ this.list.length }}条</span>

            <el-form-item
              label="备注"
              label-width="60px"
              style="margin-top: 50px; width: 100%"
            >
              <el-input
                v-model="remindContent"
                type="textarea"
                placeholder="请输入通知内容"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 多颜色 -->
    <el-dialog
      :visible.sync="VisibleAdd"
      append-to-body
      title="添加货号"
      width="500px"
      v-if="VisibleAdd"
    >
      <el-form
        ref="fAdd"
        :model="fAdd"
        :rules="rules"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="货号" prop="productNo">
          <!-- <el-input v-model="fAdd.productNo" placeholder="请输入货号" /> -->
          <el-select
            v-model="fAdd.productNo"
            clearable
            filterable
            remote
            :remote-method="getData"
            :loading="loading"
            placeholder="请选择货号"
            @change="productNotest"
          >
            <el-option
              v-for="item in productNooptions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- @blur="updateData" width="900px" :inline="true"  @close="handleClose"
                                                                                                                                                                      @keyup.enter.native="enterBlur($event)" -->
        <!-- <el-form-item label="颜色属性" prop="colorProperty">
    <el-input v-model="form.colorProperty" placeholder="请输入颜色属性" />
  </el-form-item> 
v-for="(nameItem, index) in noticItem" :key="nameItem.key"
                                                                                                                                                                -->
        <el-row v-for="(noticItem, index) in fAdd.colorProperty" :key="index">
          <el-col>
            <el-form-item label="颜色属性" prop="colorProperty">
              <!-- <el-input v-model="noticItem.value" placeholder="请输入颜色属性" /> -->
              <el-select
                v-model="noticItem.value"
                clearable
                filterable
                remote
                :remote-method="getDatas"
                :loading="loading"
                placeholder="请选择颜色属性"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-button size="mini" @click.prevent="removeDomain(noticItem)"
              >删除</el-button
            >
          </el-col>
          <!-- <el-col :span="1"> -->

          <!-- </el-col> -->
        </el-row>
        <el-form-item label="尺寸" prop="proTemplateSizeList">
          <el-select
            v-model="checked"
            placeholder="请选择尺寸"
            clearable
            multiple
            @change="testAdd"
          >
            <el-option
              v-for="dict in dict.type.sys_product_size"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 50px">
        <el-button type="primary" @click="submitAdd">确 定</el-button>
        <!-- <el-button @click="canNew">取 消</el-button> -->
        <el-button @click="addDomain">新增</el-button>
      </div>
    </el-dialog>

    <el-dialog title="尺码状态" :visible.sync="sizeStatusopen" append-to-body>
      <el-table :data="sizeStatusList">
        <el-table-column label="尺寸" align="center" prop="size" />
        <el-table-column label="上新状态" align="center" prop="newStatus">
          <template slot-scope="scope">
            <div>
              {{ scope.row.newStatus | state2 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listData } from "@/api/system/dict/data";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  productNoLike,
} from "@/api/product/template";
import {
  listRelation,
  getRelation,
  delRelation,
  addRelation,
  updateRelation,
  add,
} from "@/api/product/relation";
import {
  listRole,
  getRole,
  delRole,
  addRole,
  updateRole,
  dataScope,
  changeRoleStatus,
  deptTreeSelect,
  deptTreeNew,
} from "@/api/system/role";
import {
  listNew,
  getNew,
  delNew,
  addNew,
  updateNew,
  batchAdd,
  batchAddStatus,
} from "@/api/product/new";
import {
  listSecondry,
  getSecondry,
  delSecondry,
  addSecondry,
  updateSecondry,
  getInfoByName,
  colorLike,
  updateNewStatus,
  sizeStatus,
  updateUnPutAway,
} from "@/api/product/secondry";
//--------导入token
import { getToken } from "@/utils/auth";
import ImagePopover from "@/views/components/ImagePopover/index.vue";

export default {
  components: {
    ImagePopover,
  },
  name: "Secondry",
  dicts: ["sys_product_qudao", "sys_product_size", "sys_product_coder"],
  data() {
    return {
      isColor: false,
      //强制上新or部分上新
      noSelf: true,
      state: 0,
      //尺寸状态列表
      sizeStatusopen: false,
      sizeStatusList: [],
      //滚动条
      Nowscroll: "",
      //侧边栏操作
      isShowColumn: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        productNo: true,
        picUrl: true,
        colorProperty: true,
        logoUrl: true,
        proTemplateSizeList: true,
        designShootingSample: true,
        designTraining: true,
        operationMainColor: true,
        remark: true,
        // date: true,
        // name: true,
        // provinces: true,
        // city: true,
        // adreess: true,
        // zipCode: true,

        // purchase: true,
        // merchandise: true,
        // operation: true,
        // vision: true,
        // design: true,
        // copywriting: true,
        // shot: true,
        // customer: true
      },

      tableHeight: "",

      productNooptions: [],
      // 表单参数
      fAdd: {
        colorProperty: [{ value: "" }],
      },
      VisibleAdd: false,
      options: [], // 选项，从后端传递过来
      //通知post
      remindTitle: "",
      remindContent: "",
      f: {},
      //通知get
      // list: [],
      isVisible: false,
      // Visible: false,

      //部门
      deptOptions: [],
      addStageLabelList: [],

      //选中get
      list: [],
      chatlist: [],
      Visible: false,
      proTemplateSizeList: [],
      //批量上新
      newTime: "",
      newTimeMark: "",
      newChannel: [],

      checked: [],
      // checkList: [
      //   { id: 1, label: 'XS' },
      //   { id: 2, label: 'S' },
      //   { id: 3, label: 'M' },
      //   { id: 4, label: 'L' },
      //   { id: 5, label: 'XL' },
      //   { id: 6, label: 'XXL' },
      //   { id: 7, label: '均码' },
      //   // { id: 0002, label: '汽车' },
      //   // { id: 0002, label: '火车' },
      // ],
      picUrl: "",
      picUrlYL: "",
      filePic: [],
      upload_Pic: [], //提交的图片数组
      //页面上存的暂时logo图片地址List
      // fileList: [{ url: "" }],
      //logo相对路径
      logoUrl: "",
      logoUrlYL: "",
      filelogourl: [],
      upload_logourl: [], //提交的图片数组
      //图片相对路径
      // picurl: '',
      // //图片地址
      // picUrl: '',
      //logo相对路径
      // logoUrl: '',
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 2,
      //页面上存的暂时图片地址List
      // files: [{ url: "" }],
      // files: [],
      //页面上存的暂时logo图片地址List
      // fileList: [{ url: "" }],
      // fileList: [],
      //图片地址
      // imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品二级信息表格数据
      secondryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productNo: null,
        templateId: null,
        picName: null,
        picUrl: null,
        colorProperty: null,

        logoName: null,
        logoUrl: null,
        newStatus: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        colorProperty: [
          { required: true, message: "颜色不能为空", trigger: "blur" },
        ],
        // newChannel: [
        //   { required: true, message: "颜色不能为空", trigger: "focus" }
        // ],
        // proTemplateSizeList: [
        //   { required: true, message: "尺寸不能为空", trigger: "blur" }
        // ]
      },
    };
  },
  // watch: {
  //   // checked() {
  //   //   if (this.checked.length == 0) {
  //   //     this.$modal.msgError('请选择至少一个尺寸！')
  //   //     return
  //   //   }
  //   // }
  //   // 监听复选框配置列所有的变化
  //   Nowscroll: {
  //     handler: function (newnew, oldold) {
  //       // console.log(newnew);
  //       this.Nowscroll = newnew;
  //       // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
  //       this.$nextTick(() => {
  //         // this.$refs.BaseTable.doLayout();
  //         // this.$refs["BaseTable"].$el.querySelector('.el-table__body-wrapper').scrollTop = this.Nowscroll
  //         setTimeout(() => {
  //           this.$refs["BaseTable"].bodyWrapper.scrollTop = this.Nowscroll
  //         }, 13)
  //       });
  //     },
  //     deep: true,
  //     immediate: true
  //   },
  // },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.BaseTable.doLayout();
        });
      },
      deep: true,
      immediate: true,
    },
  },

  filters: {
    state2(int) {
      if (int == 0) {
        return "未上新";
      }
      if (int == 1) {
        return "已上新";
      }
      if (int == 2) {
        return "部分上新";
      }
      if (int == 3) {
        return "不上新";
      }
      // if (int == 2) { return "审批通过" };
    },
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };

    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem("column")) {
      this.checkList = JSON.parse(localStorage.getItem("column"));
    } else {
      this.checkList = {
        productNo: true,
        picUrl: true,
        colorProperty: true,
        logoUrl: true,
        proTemplateSizeList: true,
        designShootingSample: true,
        designTraining: true,
        operationMainColor: true,
        remark: true,
        // date: true,
        // name: true,
        // provinces: true,
        // city: true,
        // adreess: true,
        // zipCode: true,

        // purchase: true,
        // merchandise: true,
        // operation: true,
        // vision: true,
        // design: true,
        // copywriting: true,
        // shot: true,
        // customer: true
      };
    }
  },
  created() {
    localStorage.removeItem("secondry");
    localStorage.removeItem("secondryqueryParams");
    console.log(this.$route.query.id);
    // const id = this.$route.query.id

    // console.log(console.log(this.data$route.query.));
    // console.log(options.id);
    this.getList();
  },
  methods: {
    //未上新，已上新
    changeTheme(val) {
      this.getList();
    },
    //侧边栏操作
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      localStorage.setItem("column", JSON.stringify(this.checkList));
      this.isShowColumn = false;
    },
    // 删除
    removeDomain(item) {
      var index = this.fAdd.colorProperty.indexOf(item);
      if (index == "0") {
        // 还有一个的时候提示不能删除
        this.$message({
          message: "不能删除了",
          type: "error",
        });
        return false;
      }
      if (index !== -1 && index !== "0") {
        this.fAdd.colorProperty.splice(index, 1);
      }
    },
    // 表单新增
    addDomain() {
      this.fAdd.colorProperty.push({
        value: "",
        // key: Date.now()+,
      });
    },
    //多添加
    testAdd(val) {
      console.log(val);
      console.log(this.checked);

      let label = [];
      // this.checked = val;
      // this.checkList.forEach(item => {
      //   this.checked.forEach(j => {
      //     if (item.id == j) {
      //       // console.log(item.label);
      //       label.push({ size: item.label })
      //     }

      //   })

      // })
      this.checked.forEach((item) => {
        label.push({ size: item });
      });
      if (label == null) {
        this.$modal.msgError("请选择至少一个尺寸！");
        return;
      }
      console.log(JSON.stringify(label));
      this.fAdd.proTemplateSizeList = label;

      this.$forceUpdate();
    },
    //批量添加
    chatAdd(row) {
      // if (!this.$route.query.id) {
      //   this.$modal.msgError("禁止添加,请从货号菜单-颜色配置进入");
      //   return
      // }

      this.VisibleAdd = true;
      if (this.$route.query.id) {
        this.fAdd.productNo = this.secondryList[0].productNo;
      } else {
        this.getData(this.fAdd.productNo);
      }
    },
    canAdd() {
      this.VisibleAdd = false;
    },
    //批量添加
    submitAdd() {
      // this.fAdd.productNo = this.secondryList[0].productNo

      // return
      if (this.fAdd.proTemplateSizeList == null) {
        this.$modal.msgError("请选择至少一个尺寸！");
        return;
      }

      let label = [];
      this.fAdd.colorProperty.forEach((item) => {
        if (label.indexOf(item.value) == -1) {
          label.push(item.value);
        }
      });
      this.fAdd.colorProperty = label;
      console.log(JSON.stringify(this.fAdd.colorProperty));
      this.$refs["fAdd"].validate((valid) => {
        if (valid) {
          if (this.fAdd.id != null) {
            updateSecondry(this.f).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.VisibleAdd = false;
              this.getList();
            });
          } else {
            addProNoColorSize(this.fAdd).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                Object.assign(this.$data, this.$options.data());
                this.getList();
                // this.fAdd.colorProperty = []
                this.VisibleAdd = false;
              }
            });
            Object.assign(this.$data, this.$options.data());
            this.VisibleAdd = false;
            this.getList();
          }
        }
      });
    },
    /* 获取颜色列表 */
    getDatas(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      colorLike(key).then((res) => {
        this.loading = false;
        this.options = res.data;
        console.log(JSON.stringify(this.options));
        if (this.options.length == 0) {
          this.$modal.msgError("需要先定义一个");
          this.isColor = true;
        }
      });
    },
    /* 获取货号列表 */
    getData(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.productNooptions = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    productNotest(val) {
      console.log(val);
      this.fAdd.productNo = val;
      this.$forceUpdate(); //强制刷新
    },
    //部门树形多选
    handleContentCheck(n, obj) {
      console.log("n=====>", JSON.stringify(n));
      console.log("obj=====>", JSON.stringify(obj));
      console.log(JSON.stringify(obj.checkedNodes));
      let j = [];
      obj.checkedNodes.forEach((item) => {
        j.push(item.id);
      });
      console.log(JSON.stringify(j));
      this.f.deptIds = j;
    },
    handleNodeClick(data) {
      console.log(1);
      const id = data.id;
      console.log(data.id);
    },
    /** 根据角色ID查询部门树结构 */
    getDeptTree(roleId) {
      return deptTreeNew(roleId).then((response) => {
        let j = [];
        let m = response.depts;
        m.forEach((item) => {
          if (item.children) {
            item.children.forEach((item2, i) => {
              console.log(JSON.stringify(item2));
              // j.push(item2[i].)
              if (item2.children) {
                item2.children.forEach((item3) => {
                  console.log(JSON.stringify(item3));
                  j.push(item3);
                });
              }
            });
          }
        });
        this.deptOptions = j;
        console.log(JSON.stringify(this.deptOptions));
        // 存放选中的数据
        // this.addStageLabelList = deptTreeSelect
        // console.log(JSON.stringify(this.addStageLabelList));
        return response;
      });
    },
    dialogBeforeClose() {
      this.isVisible = false;
    },
    //通知按钮打开
    chat(row) {
      if (this.list.length == 0) {
        this.$modal.msgError("请选择一条记录");
        return;
      }
      this.getDeptTree(1);

      this.isVisible = true;
    },
    //通知提交
    submit() {
      if (!this.f.deptIds) {
        this.$modal.msgError("请选择至少一个部门！");
        return;
      }
      var str = "";
      //上新id

      const names = this.list.map((user) => user.id);
      console.log(names);
      //货号
      const na = this.list.map((user) => user.productNo);
      console.log(na);
      //颜色
      const name = this.list.map((user) => user.colorProperty);
      console.log(name);
      for (let i = 0; i < names.length; i++) {
        console.log(names[i]);
        console.log(na[i]);
        console.log(name[i]);
        str +=
          "颜色ID：" +
          names[i] +
          "，货号：" +
          na[i] +
          "，颜色：" +
          name[i] +
          "/n";
      }
      console.log(JSON.stringify(str));

      this.f.remindTitle = this.remindTitle;
      this.f.remindContent = str + "通知内容：" + this.remindContent + "。";
      console.log(JSON.stringify(this.f));
      add(this.f).then((response) => {
        console.log(response);
        this.$modal.msgSuccess("发布成功");

        this.isVisible = false;
        this.remindContent = "";
        this.remindTitle = "";
        this.$store.dispatch("getUnreadMessagesCount");
      });
    },
    // BaseTable
    tableEdit(row, column, cell, event) {
      // localStorage.setItem("secondryqueryParams", JSON.stringify(this.queryParams))
    },

    //点击某一行
    t(row, column, cell, event) {
      console.log(row, column, cell, event);

      this.handleUpdate(row);
      // return;
      let vmEl = this.$refs["BaseTable"].$el;
      console.log(vmEl);
      const scrollParent = vmEl.querySelector(".el-table__body-wrapper");
      // this.Nowscroll = scrollParent.scrollTop
      // console.log(this.queryParams);
      console.log(scrollParent.scrollTop);
      // return
      var templateList = {
        // currentPage: this.queryParams.pageNum,
        // pageSize: this.queryParams.pageSize,
        scrollTop: scrollParent.scrollTop,

        // productNo: this.queryParams.productNo,
        // "colorProperty": this.queryParams.colorProperty,
        // "manufacturerCode": this.queryParams.manufacturerCode,
        // "procureRemark": this.queryParams.procureRemark
      };
      localStorage.setItem("secondry", JSON.stringify(templateList));
    },
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
    },
    //校验颜色
    updateData(event) {
      //更新操作
      console.log("updated");
      if (!this.form.colorProperty.trim()) {
        return;
      }
      getInfoByName(this.form.colorProperty).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));
        if (response.code == 200) {
          return true;
        } else {
          this.$modal.msgError(response.msg);
          // this.$message.msgError('该颜色未在字典定义')
          return;
        }
      });
    },
    //回车失去焦点
    enterBlur(event) {
      event.target.blur();
      // console.log(event.target.blur());
    },

    //渠道全选
    test1(val) {
      listData({ dictType: "sys_product_qudao" }).then((response) => {
        console.log(JSON.stringify(response.rows));
        if (val == "1") {
          // response.rows.forEach(item=>{
          //   this.newChannel.push(item)
          // })
          for (let i = 0; i < response.rows.length; i++) {
            const element = response.rows[i];
            this.newChannel.push(element.dictValue);
          }
        }
      });
      // console.log(JSON.stringify(dict.type['sys_product_qudao']));
      console.log(val);
      console.log(this.newChannel);

      let label = [];
      // this.checked = val;
      // this.checkList.forEach(item => {
      //   this.checked.forEach(j => {
      //     if (item.id == j) {
      //       // console.log(item.label);
      //       label.push({ size: item.label })
      //     }

      //   })

      // })
      this.newChannel.forEach((item) => {
        // label.push({ newChannel: item, newChannelName: item })
        if (item !== "1") {
          label.push({ newChannel: item, newChannelName: item });
        }
      });
      if (label == null) {
        this.$modal.msgError("请选择至少一个渠道！");
        return;
      }

      return label;

      this.$forceUpdate();
    },
    //选中尺寸
    test(val) {
      console.log(val);
      console.log(this.checked);
      let label = [];
      // this.checked = val;
      // this.checkList.forEach(item => {
      //   this.checked.forEach(j => {
      //     if (item.id == j) {
      //       // console.log(item.label);
      //       label.push({ size: item.label })
      //     }

      //   })

      // })
      this.checked.forEach((item) => {
        label.push({ size: item });
      });
      if (label == null) {
        this.$modal.msgError("请选择至少一个尺寸！");
        return;
      }
      console.log(JSON.stringify(label));
      this.form.proTemplateSizeList = label;

      this.$forceUpdate();
    },
    formatData(row) {
      let rowPerson = (row && row.proTemplateSizeList) || [];
      let arr = [];
      rowPerson.forEach((item) => {
        //如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
        arr.push(item.size);
      });
      //
      return arr.join("/");
    },
    /** 查询产品二级信息列表 */
    getList() {
      let queryParam = null;

      queryParam = this.$route.query.id;

      //   var template = JSON.parse(localStorage.getItem("secondryqueryParams"))
      // if (template) {
      //   // this.$set(this.queryParams, storeForm)
      //   this.queryParams = template
      // }

      var templateList = JSON.parse(localStorage.getItem("secondry"));
      if (templateList) {
        // this.$set(this.queryParams, "pageNum", templateList.currentPage);
        // this.$set(this.queryParams, "pageSize", templateList.pageSize);
        // this.$set(this.queryParams, "productNo", templateList.productNo);

        this.Nowscroll = templateList.scrollTop;

        // this.$set(this.queryParams, "productNo", otherVal.productNo);
        // this.$set(this.queryParams, "colorProperty", otherVal.colorProperty);
        // this.$set(this.queryParams, "manufacturerCode", otherVal.manufacturerCode);
        // this.$set(this.queryParams, "procureRemark", otherVal.procureRemark);
      }
      this.loading = true;

      console.log(JSON.stringify(this.secondryList));
      // , this.queryParams.productNo, colorProperty: this.queryParams.colorProperty

      listSecondry({
        templateId: queryParam,
        productNo: this.queryParams.productNo,
        colorProperty: this.queryParams.colorProperty,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        newStatus: this.queryParams.newStatus,
      }).then((response) => {
        this.secondryList = response.rows;
        console.log(JSON.stringify(this.secondryList));

        this.total = response.total;
        this.loading = false;
        setTimeout(() => {
          this.$refs["BaseTable"].bodyWrapper.scrollTop = this.Nowscroll;
          // this.$nextTick(() => {
          //     this.$refs.table.doLayout();
          // });
        }, 13);
      });
    },
    // 取消按钮
    cancel() {
      this.isVisible = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.newChannel = [];
      this.checked = []; //加的是这一行
      // this.checkList = undefined
      this.files = undefined; //加的是这一行
      this.fileList = undefined; //加的是这一行
      this.form = {
        id: null,
        templateId: null,
        picName: null,
        picUrl: null,
        colorProperty: null,
        productNo: null,

        logoName: null,
        logoUrl: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      localStorage.removeItem("secondry");
      localStorage.removeItem("secondryqueryParams");
      // this.queryParams.templateId = null
      this.resetForm("queryForm");
      this.queryParams = {};
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.list = selection.map((item) => item);
      this.chatlist = this.list.slice(0, 5);
      console.log(JSON.stringify(this.chatlist));
      console.log(JSON.stringify(this.list));
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //批量上新
    chatNew(row) {
      if (this.list.length == 0) {
        this.$modal.msgError("请选择一条记录");
        return;
      }

      this.Visible = true;
      return;
      let vmEl = this.$refs["BaseTable"].$el;
      console.log(vmEl);
      const scrollParent = vmEl.querySelector(".el-table__body-wrapper");
      // this.Nowscroll = scrollParent.scrollTop
      // console.log(this.queryParams);
      // console.log(scrollParent.scrollTop);
      // return
      var otherVal = {
        currentPage: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        scrollTop: scrollParent.scrollTop,

        // "productNo": this.queryParams.productNo,
        // "colorProperty": this.queryParams.colorProperty,
        // "manufacturerCode": this.queryParams.manufacturerCode,
        // "procureRemark": this.queryParams.procureRemark
      };
      localStorage.setItem("secondryList", JSON.stringify(otherVal));
    },
    //取消
    dialogBeforeCloseNew() {
      this.Visible = false;
    },
    canNew() {
      this.Visible = false;
    },
    changeState(val) {
      console.log(val);
      if (val == 0) {
        console.log(0);
        // this.fReturn = {}
        // this.fReturn.expressCompany = '中通快递'
        this.noSelf = true;
      } else {
        console.log(1);
        // this.fReturn = {}
        // this.fReturn.expressCompany = '中通快递'
        this.noSelf = false;
      }
    },

    onFocus() {
      // console.log(1);
      this.$modal.msgWarning("请确认上新方式");
    },
    submitSelf() {
      // console.log(1);
      // return
      let label = this.test1();
      console.log(JSON.stringify(label));

      var b = [];
      // var c = {}
      for (let i = 0; i < this.list.length; i++) {
        // const element = array[i];
        var info = this.list[i];
        // var size=info.map(item=>{item.})
        var size = [];
        for (let j = 0; j < info.proTemplateSizeList.length; j++) {
          // const element = array[j];
          size.push({ size: info.proTemplateSizeList[j].size });
        }

        // c.add(info.productNo)
        // console.log(JSON.stringify(c));
        b.push({
          productNo: info.productNo,
          colorProperty: info.colorProperty,
          sizeList: size,
          channelList: label,
          newTime: this.newTime,
          newTimeMark: this.newTimeMark,
          newStatus: 0,
        });

        // console.log(JSON.stringify(info.productNo));

        // var size = info[i].proTemplateSizeList
      }
      console.log(JSON.stringify(b));
      batchAddStatus(b).then((response) => {
        // console.log(response);
        if (response.code == 200) {
          this.$modal.msgSuccess("上新成功");
          Object.assign(this.$data, this.$options.data());
          this.Visible = false;
          // var otherVal = JSON.parse(localStorage.getItem("secondryList"))
          // if (otherVal) {
          //   this.$set(this.queryParams, "pageNum", otherVal.currentPage);
          //   this.$set(this.queryParams, "pageSize", otherVal.pageSize);

          //   this.Nowscroll = otherVal.scrollTop

          // }
          this.getList();
        }
      });
    },
    submitNew() {
      // console.log(0);
      // return
      let label = this.test1();
      console.log(JSON.stringify(label));

      var b = [];
      // var c = {}
      for (let i = 0; i < this.list.length; i++) {
        // const element = array[i];
        var info = this.list[i];
        // var size=info.map(item=>{item.})
        var size = [];
        for (let j = 0; j < info.proTemplateSizeList.length; j++) {
          // const element = array[j];
          size.push({ size: info.proTemplateSizeList[j].size });
        }

        // c.add(info.productNo)
        // console.log(JSON.stringify(c));
        b.push({
          productNo: info.productNo,
          colorProperty: info.colorProperty,
          sizeList: size,
          channelList: label,
          newTime: this.newTime,
          newTimeMark: this.newTimeMark,
          newStatus: 0,
        });

        // console.log(JSON.stringify(info.productNo));

        // var size = info[i].proTemplateSizeList
      }
      console.log(JSON.stringify(b));
      batchAdd(b).then((response) => {
        // console.log(response);
        if (response.code == 200) {
          this.$modal.msgSuccess("上新成功");
          Object.assign(this.$data, this.$options.data());
          this.Visible = false;
          var otherVal = JSON.parse(localStorage.getItem("secondryList"));
          if (otherVal) {
            this.$set(this.queryParams, "pageNum", otherVal.currentPage);
            this.$set(this.queryParams, "pageSize", otherVal.pageSize);

            this.Nowscroll = otherVal.scrollTop;
          }
          this.getList();
        }
      });
    },

    /** 新增按钮操作 */
    handleAdd() {
      if (!this.$route.query.id) {
        this.$modal.msgError("禁止添加,请从货号菜单-颜色配置进入");
        return;
      }
      this.reset();
      this.open = true;
      this.title = "添加产品颜色信息";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      // if (!this.$route.query.id) {
      //   this.$modal.msgError("禁止修改,请从货号菜单-颜色配置进入");
      //   return
      // }
      this.reset();
      const id = row.id || this.ids;

      getSecondry(id).then((response) => {
        this.form.templateId = response.data.templateId;
        //图片回显
        this.picUrl = response.data.picUrl;
        this.picUrlYL = response.data.picUrlYL;
        this.logoUrlYL = response.data.logoUrlYL;
        this.logoUrl = response.data.logoUrl;
        this.filePic = response.data.picUrl
          ? [{ url: process.env.VUE_APP_BASE_API + response.data.picUrl }]
          : []; //图片加的是这一行
        this.filelogourl = response.data.logoUrl
          ? [{ url: process.env.VUE_APP_BASE_API + response.data.logoUrl }]
          : []; //logo图片加的是这一行
        this.form = response.data;
        console.log(JSON.stringify(this.form));
        //尺寸回显
        if (
          response.data.proTemplateSizeList &&
          response.data.proTemplateSizeList.length > 0
        ) {
          let val = response.data.proTemplateSizeList.map((item) => {
            return item.size;
          });
          console.log(val);
          this.checked = val;
        }
        //   let m = []
        //   for (let i = 0; i < val.length; i++) {
        //     // const element = array[i];
        //     this.checkList.forEach(item => {
        //       if (val[i] == item.label) {
        //         m.push(item.id)
        //       }
        //     })

        //   }

        //   console.log(JSON.stringify(m));
        //   this.checked = m
        //   // this.$set(this.form, 'checked', m)
        // }
        // this.getInfoByNameg()

        this.open = true;
        this.title = "修改产品颜色信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      // this.form.templateId = this.$route.query.id

      if (this.form.proTemplateSizeList == null) {
        this.$modal.msgError("请选择至少一个尺寸！");
        return;
      }
      this.form.picUrlYL = this.picUrlYL;
      this.form.logoUrlYL = this.logoUrlYL;
      this.form.picUrl = this.picUrl;
      this.form.logoUrl = this.logoUrl; // 注：重要(用于添加到数据库)，加的是这一行
      console.log(JSON.stringify(this.form));
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            if (this.isColor == true) {
              this.$modal.msgError("需要先定义一个颜色属性");
              return;
            }
            updateSecondry(this.form).then((response) => {
              // Object.assign(this.$data, this.$options.data());
              this.open = false;
              if (response.code == 200) {
                this.$modal.msgSuccess("修改成功!");
                this.isColor = false;
              }

              this.getList();
            });
          } else {
            this.form.templateId = this.$route.query.id;
            if (!this.form.templateId) {
              this.$modal.msgError(
                "添加颜色信息，请从货号信息菜单点击颜色配置作为入口"
              );
              return;
            }
            addSecondry(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              // Object.assign(this.$data, this.$options.data());
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除产品颜色信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delSecondry(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 修改不上新 */
    handleNonew(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认修改不上新产品颜色信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return updateUnPutAway(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("修改成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "product/secondry/export",
        {
          ...this.queryParams,
        },
        `secondry_${new Date().getTime()}.xlsx`
      );
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureSuccessPic(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.picUrl = file.response.url;
      // const url = file.response.fileName;
      this.picUrl = file.response.fileName;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
      // const url = file.response.fileName;
      this.logoUrl = file.response.fileName;
      // console.log(JSON.stringify(url));
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        this.files = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    changeFile2(file, fileList) {
      if (fileList.length > 1) {
        this.fileList = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },

    handlePic(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.filePic.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadPic.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadPic.submit(); // 提交图片上传队列
    },
    //上传
    changePic(file, fileList) {
      // this.fileList = fileList
      console.log("成功", file, fileList, this.filePic);
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.filePic = fileList.slice(-1);
      }
    },
    RemovePic() {
      this.picUrl = "";
      this.picUrlYL = "";
    },
    uploadPic(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.picUrl = file.response.fileName;
      this.picUrlYL = file.response.fileNameYL;
    },

    //logo图片
    handlelogourl(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.filelogourl.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadlogourl.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadlogourl.submit(); // 提交图片上传队列
    },
    //上传
    changelogourl(file, fileList) {
      // this.fileList = fileList
      console.log("成功", file, fileList);
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      if (fileList.length > 1) {
        this.filelogourl = fileList.slice(-1);
      }
    },
    Removelogourl(file, fileList) {
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));
      this.logoUrl = "";
      this.logoUrlYL = "";
    },

    uploadlogourl(res, file, fileList) {
      console.log(JSON.stringify(file.response.fileName));
      this.logoUrl = file.response.fileName;
      this.logoUrlYL = file.response.fileNameYL;
    },
    /** 刷新缓存按钮操作 Warning*/
    handleRefreshCache() {
      this.$modal.msgWarning("数据正在同步，请稍候");
      updateNewStatus().then(() => {
        this.$modal.msgSuccess("同步数据成功");
        this.getList();
        // this.$store.dispatch('dict/cleanDict');
      });
    },
    //尺寸状态
    statusList(row) {
      sizeStatus({ templateSecondryId: row.id }).then((response) => {
        this.sizeStatusList = response.rows;
        this.sizeStatusopen = true;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

.left el-tree-node__content {
  padding-left: 15px !important;
  height: 56px;
}

.left .el-tree-node__children {
  .el-tree-node__content {
    padding-left: 30px !important;
  }
}

// .el-checkbox__inner {
//     display: inline-block;
//     z-index: -1;
// }  .el-checkbox__inner

::v-deep el-checkbox {
  display: none !important;

  z-index: -1;
}

/* 1. 去除Elment-plus框架自带样式边框;2 .保证选中后高度不变 */
::deep() .el-checkbox__inner::after {
  border: none;
  width: 100%;
  height: 100%;
}

.leftStyle {
  position: absolute;
  left: -200px;
  top: 1px;
  font-size: 12px;

  // opacity: 0;
  // clear: both;
  // overflow: hidden;
}

#appStyle {
  position: relative;
  top: 50px;
  left: 250px;
  width: 60%;

  // clear: both;
}

.container {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

.columnOption {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;

  .content {
    width: 150px;
    height: 100%;
    background-color: #f5f7fa;
    // background-color: rgb(203, 223, 198);

    .head {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }

    .body {
      width: 100%;
      height: calc(100% - 88px);
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;

      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;

        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }

        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }

    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>